<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
	</head>
	<body>
		<div id="d"> div입니다. </div>
		script로 모든 Element에 접근할 수 있습니다. 
		＊getElementById("아이디")
		＊getElementsByTagName("태그이름");
		<br>
		
		<button id="btn1"> 이미지 바꾸기 </button>
		<button id="btn2"> 이미지 크게 만들기 </button>
		<button id="btn3"> 이미지 작게 만들기 </button>
		<br>
		<img id="img1" width="400"
			src="http://dicimg.naver.com/100/sub/1147414_0.gif" />
			<br><br><br><br><br><br><br><br>
			
			<img id="img11" width="100" src="http://dicimg.naver.com/100/800/38/1038.jpg" />
			 <img id="img12" width="100"src="14.JPG" />
			 <img id="img13" width="100" src="http://dicimg.naver.com/100/800/4/5267304.jpg" />
			 <img id="img14" width="100" src="http://dicimg.naver.com/100/sub/1147414_0.gif" />
			 <br>
			 <img id="img15" width="400" src="http://dicimg.naver.com/100/800/38/1038.jpg" />



		<script>
			var d=document.getElementById("d");
			//alert(d.innerHTML);
			d.innerHTML="div내용을 바꾸자";
			var img1=document.getElementById("img1");
			var original=img1.src;
			alert(img1.src);
			var btn1=document.getElementById("btn1");
			btn1.onclick=function(){
				img1.src="http://dicimg.naver.com/100/800/4/5267304.jpg";
			}
			var btn2=document.getElementById("btn2");
			btn2.onmouseover=function(){
				img1.width="800";
			}
			var btn3=document.getElementById("btn3");
			btn3.onmouseover=function(){
				img1.width="400";
			}
			img1.onmouseover=function(){
				img1.src="14.JPG";
			}
			img1.onmouseout=function(){
				img1.src="http://dicimg.naver.com/100/sub/1147414_0.gif";
			}

			var img11=document.getElementById("img11");
			var img12=document.getElementById("img12");
			var img13=document.getElementById("img13");
			var img14=document.getElementById("img14");
			var img15=document.getElementById("img15");
			
			img12.onclick=function(){
				img15.src="14.JPG";
			}
			img13.onclick=function(){
				img15.src="http://dicimg.naver.com/100/800/4/5267304.jpg";
			}
			img14.onclick=function(){
				img15.src="http://dicimg.naver.com/100/sub/1147414_0.gif";
			}
			img11.onclick=function(){
				img15.src="http://dicimg.naver.com/100/800/38/1038.jpg";
			}
			
			
			
			
		</script>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<button id="left"> 왼쪽그림 </button>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button id="right"> 오른쪽그림 </button> <br>
		<div id="t"> 그림의 제목 : </div> <br>
	
		<img id="gallery">
		
		<script>
			var left=document.getElementById("left");
			var right=document.getElementById("right");
			var gallery=document.getElementById("gallery");
			var t=document.getElementById("t");
			images=["dog.jpg", "cat.jpg", "giraffe.jpg", "leo.jpg", "tiger.jpg"];
			titles=["개", "고양이", "기린", "표범", "호랑이"];
			var i=0;
			gallery.src=images[i];
			left.onclick=function(){
				i--; if(i<0) i=images.length-1;
				gallery.src=images[i];
				t.innerHTML=titles[i];
				
			}
			right.onclick=function(){
				i++; if(i>images.length-1) i=0;
				gallery.src=images[i];
				t.innerHTML=titles[i];
			}
			//setInterval(펑션, 시간); 반복하기
			setInterval(left.onclick, 5000);
			setInterval(right.onclick, 5000);
			
		
			
			
		</script>
		
	</body>
</html>

